<!-- views/About.vue -->
<template>
    <div class="about">
        <!-- state -->
        <div>state->数量 {{ this.$store.state.num }}</div>
        <!-- getters -->
        <div>getters->数量 {{ this.$store.getters.gettersNum }}</div>
        <!-- state -->
        <div>mapState->数量 {{ num }}</div>
        <!-- getters -->
        <div>mapGetters->数量 {{ gettersNum }}</div>
        <!-- 按钮组件 -->
        <btn></btn>


        <!-- user模块 模块化且使用命名空间之后调用写法有所不同-->
        <div class="user">
            (state)->用户名：{{ this.$store.state.user.userInfo.name }}
        </div>
        <div class="">(mapState)->用户名：{{ userInfo.name }}</div>
        <div>(getters)->{{ this.$store.getters['user/gettersUserInfo'] }}</div>
        <div>(mapGetters)->{{ gettersUserInfo }}</div>

        <div>
            <button @click="this.$store.commit('user/updateName')">
                mutations修改用户名
            </button>
            <button @click="this.$store.dispatch('user/updateNameAction')">
                actions修改用户名
            </button>
        </div>
        <div>
            <button @click="updateName()">mapMutations修改用户名</button>
            <button @click="updateNameAction()">mapActions修改用户名</button>
        </div>
    </div>
</template>

<script>
// 引入按钮组件
import Btn from '@/components/Btn.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    components: {
        Btn
    },
    computed: {
        ...mapState(['num']),
        ...mapGetters(['gettersNum']),

        // user 模块化且使用命名空间之后调用写法有所不同
        ...mapState({ userInfo: state => state.user.userInfo }),      
        ...mapGetters({ gettersUserInfo: 'user/gettersUserInfo' })
    },
    methods: {
        // user 模块化且使用命名空间之后调用写法有所不同
        ...mapMutations({ updateName: 'user/updateName' }),
        ...mapActions({ updateNameAction: 'user/updateNameAction' })
    }
}
</script>

<style scoped>
.user {
    margin-top: 30px;
}
</style>
